<template>
  <header>
    <!-- shadow of header -->
    <div class="w-screen">
      <div :class="showAd ? 'h-8' : 'h-0'">
      </div>
      <div class="h-20">
      </div>
    </div>
    <div class="fixed top-0 left-0 w-screen z-20">
      <div class="w-full bg-gray-900 transition-all duration-500 overflow-hidden h-8 p-1 flex items-center" :class="showAd ? 'h-8' : 'h-0'">
        <div class="w-full max-w-screen-xl px-3 h-full text-white mx-auto relative">
          <p class="float-left w-full block">welcome to loklik!</p>
          <button class="h-full float-right w-7 -ml-7" aria-label="关闭广告" @click="onClick">
            <img src="./img/close.png">
          </button>
        </div>
      </div>
      <nav class="w-full bg-white h-20">
        <div class="w-full max-w-screen-xl px-3 h-full mx-auto p-2 flex items-center overflow-hidden">
          <a class="block w-40" href="/">
            <!-- <img class="w-full h-full" src="./img/logo.png" alt="logo"> -->
          </a>
          <ul class="ml-32 flex items-center w-7 float-left w-full overflow-hidden font-sans" role="menubar">
            <li class="float-left p-2 font-bold text-gray-700" role="presentation">
              <NuxtLink role="menuitem" to="/">Home</NuxtLink>
            </li>
            <li class="float-left ml-12 p-2 font-bold text-gray-700" role="presentation">
              <NuxtLink role="menuitem" to="/member-club">Member Club</NuxtLink>
            </li>
          </ul>
          <div class="flex-shrink-0">
            <!-- 'float' fix IE -->
            <button class="h-full float-right w-6">
              <img class="w-full h-full" src="./img/person.png" alt="btn-person">
            </button>
            <button class="h-full float-right w-6 mr-7">
              <img class="w-full h-full" src="./img/cart.png" alt="btn-cart">
            </button>
            <button class="h-full float-right w-6 mr-7">
              <img class="w-full h-full" src="./img/search.png" alt="btn-search">
            </button>
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>

<script type="text/javascript">
export default {
  name: 'HeaderNav',
  data() {
    return {
      showAd: true,
    };
  },
  methods: {
    onClick() {
      this.showAd = false;
    }
  },
};
</script>

<style scoped lang="less">
@color-primary: #26C5C8;
.nuxt-link-exact-active[role="menuitem"] {
  color: @color-primary;
  &:after {

  }
}
</style>
